<template>
  <div ref="chart" :id="id" :class="className" style="height: 100%; width: 100%" />
</template>

<script>
import tdTheme from './theme.json' // 引入默认主题
import resizeMixins from "@/utils/resizeMixins";

export default {
  name: 'Echart',
  mixins: [resizeMixins],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    options: {
      type: Object,
      default: ()=>({})
    }
  },
  data () {
    return {
      chart: null
    }
  },
  watch: {
    options: {
      handler (options) {
        // 设置true清空echart缓存
        this.chart.setOption(options, true);
        this.chart.resize();
      },
      deep: true
    }
  },
  mounted () {
    //this.chart = echarts.init(this.$el, 'macarons')
    this.$echarts.registerTheme('tdTheme', 'macarons'); // 覆盖默认主题
    this.initChart();
  },
  methods: {
    resize() {
      this.chart.resize();
    },
    initChart () {
      var that = this;
      // 初始化echart
      this.chart = this.$echarts.init(this.$el, 'macarons');
      this.chart.setOption(this.options, true);
      this.chart.resize();

      this.chart.on('click', function (params) {
        console.log('params',params);
        that.$emit("chartItemClick", params);
      });
    }
  }
}
</script>
